<template>
  <div class="nav">
    <ul>
      <li><a href="#">企业信息</a></li>
      <li><a href="/#/productInfo">产品信息</a></li>
      <li><a href="/#/monitor" id="black">基地信息</a></li>
      <li><a href="#">地块信息</a></li>
      <li><a href="#">农事活动</a></li>
      <li><a href="/#/data">环境数据</a></li>
    </ul>
  </div>

  <div class="productInfo-header">
    <div class="productInfo-logo">
      <a href="/#/search"><img src="@/assets/logo1.png" alt=""></a>
    </div>
  </div>

  <div class="productInfo-content">
    <h1>鹤峰县生产基地监控信息</h1>
    <el-tabs :tab-position="tabPosition" class="demo-tabs">
      <el-tab-pane label="生产车间1">生产车间1
        <video ref="videoElement1" controls @timeupdate="handleTimeUpdate(1)"></video>
      </el-tab-pane>
      <el-tab-pane label="生产车间2">生产车间2
        <video ref="videoElement2" controls @timeupdate="handleTimeUpdate(2)"></video>
      </el-tab-pane>
      <el-tab-pane label="生产车间3">生产车间3
        <video ref="videoElement3" controls @timeupdate="handleTimeUpdate(3)"></video>
      </el-tab-pane>
    </el-tabs>
  </div>

  <div class="footer">
    <p>Copyright©2008-2023 All Rights Reserved</p>
    <p>版权所有©武汉网酷科技有限公司 | 地址：湖北省武汉市洪山区雄楚大街428号 | 邮编：430074 | 技术支持： <a href="#" title="中南民族大学工程技术中心">中南民族大学</a> <a
        href="#" title="中南民族大学工程技术中心">湖北省制造企业智能管理工程技术研究中心</a></p>
    <p><a href="#" title="鄂ICP备16008630号-1">鄂ICP备16008630号-1</a></p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Hls from 'hls.js'

const tabPosition = ref('left')

// 定义
const videoElement1 = ref<HTMLVideoElement | null>(null);
const videoElement2 = ref<HTMLVideoElement | null>(null);
const videoElement3 = ref<HTMLVideoElement | null>(null);

// 用于存储HLS播放器的实例
let hlsPlayer1: Hls | null = null;
let hlsPlayer2: Hls | null = null;
let hlsPlayer3: Hls | null = null;

onMounted(() => {
  // 判断浏览器是否支持HLS格式，如果支持则创建HLS播放器实例
  if (Hls.isSupported()) {
    hlsPlayer1 = new Hls();
    hlsPlayer2 = new Hls();
    hlsPlayer3 = new Hls();
    if (videoElement1.value && videoElement2.value && videoElement3.value) {
      setupHLS(videoElement1.value, hlsPlayer1, 'https://open.ys7.com/v3/openlive/K17133853_2_1.m3u8?expire=1742611413&id=693047557529538560&t=534368e4b495b9c573e8c85ad887fed2d2c5ade6aed4d32508c4906d6df65b5c&ev=100');
      setupHLS(videoElement2.value, hlsPlayer2, 'https://open.ys7.com/v3/openlive/K17133853_3_1.m3u8?expire=1742611833&id=693049316210782208&t=4d31d01cc46912a46956af6cfcada978714ae3172e7ad88f19097343c686dab3&ev=100');
      setupHLS(videoElement3.value, hlsPlayer3, 'https://open.ys7.com/v3/openlive/K17133853_4_1.m3u8?expire=1742612047&id=693050216136740864&t=621a833d36d2ddc560fb5eb9a4f43768e53109f3a296624f9187e6264a40726e&ev=100');
    }
    // 不支持，则直接将视频流地址赋给视频元素的'src'属性，并播放视频
  } else if (videoElement1.value && videoElement2.value && videoElement3.value) {
    setupNonHLS(videoElement1.value, 'https://open.ys7.com/v3/openlive/K17133853_2_1.m3u8?expire=1742611413&id=693047557529538560&t=534368e4b495b9c573e8c85ad887fed2d2c5ade6aed4d32508c4906d6df65b5c&ev=100');
    setupNonHLS(videoElement2.value, 'https://open.ys7.com/v3/openlive/K17133853_3_1.m3u8?expire=1742611833&id=693049316210782208&t=4d31d01cc46912a46956af6cfcada978714ae3172e7ad88f19097343c686dab3&ev=100');
    setupNonHLS(videoElement3.value, 'https://open.ys7.com/v3/openlive/K17133853_4_1.m3u8?expire=1742612047&id=693050216136740864&t=621a833d36d2ddc560fb5eb9a4f43768e53109f3a296624f9187e6264a40726e&ev=100');
  }
});

// 设置HLS播放器
const setupHLS = (video: HTMLVideoElement, player: Hls | null, url: string) => {
  player!.attachMedia(video);     // 将视频元素附加到HLS播放器上
  player!.loadSource(url);        // 加载视频流
  // 监听'Hls.Events.MANIFEST_PARSED'事件，当视频信息加载完成后播放视频
  player!.on(Hls.Events.MANIFEST_PARSED, function () {
    video.play();
    video.muted = true;
  });
};

// 设置非HLS格式的视频播放
const setupNonHLS = (video: HTMLVideoElement, url: string) => {
  video.src = url;
  video.play();
};

// 处理视频时间更新事件
const handleTimeUpdate = (index: number) => {

};
</script>

<style scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>